<template>
  <div id="buy">
    <com-head :opacity="0">购买</com-head>
    <div class="lunbo">
      <div class="swiper">
        <mt-swipe :auto="3000">
          <mt-swipe-item v-for="(item,index) in images" :key="index">
            <img :src="item">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <p>{{product.name}}</p>
      <p>&yen;{{product.price}}</p>
    </div>
    <div class="product_foot">
      <div class="left">数量</div>
      <div class="right">已选择{{count}}件</div>
      <div class="rightbox">
        <div class="minus" @click="minus()">-</div>
        <div class="blank">{{count}}</div>
        <div class="add" @click="add()">+</div>
      </div>
    </div>
    <!-- 书籍详情 -->
    <div class="bookdetail">
      <div class="title">
        <img src="../assets/image/title.png">&nbsp;书籍详情&nbsp;
        <img src="../assets/image/title.png">
      </div>
      <div class="book_sign" v-html="product.book_sign"></div>
    </div>
    <butFoot :click="buySome">立即购买</butFoot>
  </div>
</template>

<script>
export default {
  name: "buy",
  data() {
    return {
      id: this.$route.query.id,
      images: [],
      product: {
        name: "",
        price: "",
        book_sign: ""
      },
      count: "1"
    };
  },

  computed: {},

  created() {},

  mounted() {
    this.loading();
  },

  methods: {
    loading() {
      this.axios
        .post("index/detail", {
          book_id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.product.name = data.data.name;
            this.product.price = data.data.price;
            this.product.book_sign = data.data.book_sign;
            this.images = data.data.img;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    buySome() {
      this.$router.push({
        name: "orderDetail",
        query: { id: this.id, num: this.count }
      });
    },
    minus() {
      if (this.count > 1) {
        this.count--;
      }
    },
    // 加商品的数量
    add() {
      this.count++;
    }
  }
};
</script>
<style lang='scss' scoped>
#buy {
  .lunbo {
    width: 750px;
    // height: 780px;
    background-color: #fff;
    padding: 50px 32px 0 32px;
    box-sizing: border-box;
    .swiper {
      margin: 0px auto;
      width: 496px;
      height: 680px;
      .mint-swipe-indicator {
        width: 10px;
        height: 12px;
        background: rgba(153, 153, 153, 1);
      }
      .is-active {
        background: #fff;
      }
      img {
        width: 100%;
      }
    }
    p:nth-of-type(1) {
      margin-top: 20px;
      color: rgba(34, 34, 34, 1);
      line-height: 60px;
    }
    p:nth-of-type(2) {
      color: rgba(236, 2, 2, 1);
      font-size: 36px;
      line-height: 80px;
    }
  }
  .product_foot {
    height: 100px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 32px;
    box-sizing: border-box;
    background-color: #fff;
    .right {
      margin-left: 100px;
      align-items: center;
      justify-content: flex-start;
      color: #999;
    }
    .rightbox {
      margin-left: 10px;
      display: flex;
      align-items: center;
      line-height: 100px;
      font-size: 28px;
      color: #999;
      border-radius: 6px;

      border: 1Px solid #999999;
      .add,
      .minus {
        width: 56px;
        line-height: 56px;
        height: 56px;
        text-align: center;
        color: #9290ae;
        &:hover {
          // background: #e5e5e5;
        }
      }
      .blank {
        width: 80px;
        line-height: 45px;
        height: 45px;
        text-align: center;
        color: #282828;
        border-left: 1Px solid #999999;
        border-right: 1Px solid #999999;
      }
    }
  }
  .bookdetail {
    margin-top: 20px;
    padding: 20px 32px;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        width: 152px;
        height: 10px;
      }
    }
  }
}
</style>